<script setup lang="ts">
import {ref, reactive, computed, onMounted} from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
let sysStores = useSysStore();

//清除状态
sysStores.clear()

// 登录方式类型
type LoginType = 'sms' | 'password' | 'wechat'

// 当前登录方式
const currentLoginType = ref<LoginType>('password')

// 表单数据
const formData = reactive({
  phone: '333',
  smsCode: '',
  password: '333',
  remember: false,
  captcha: ''
})

// 状态控制
const isLoading = ref(false)
const isSendingSms = ref(false)
const smsCountdown = ref(0)
const showPassword = ref(false)

// 计时器
let countdownTimer: NodeJS.Timeout | null = null

// 计算属性
const canSendSms = computed(() => {
  return formData.phone.length === 11 && smsCountdown.value === 0 && !isSendingSms.value
})

const canLogin = computed(() => {
  return true;
  // if (currentLoginType.value === 'sms') {
  //   return formData.phone.length === 11 && formData.smsCode.length >= 4
  // } else if (currentLoginType.value === 'password') {
  //   return formData.phone.length === 11 && formData.password.length >= 6
  // }
  // return false
})

const smsButtonText = computed(() => {
  if (isSendingSms.value) return '发送中...'
  if (smsCountdown.value > 0) return `重新发送(${smsCountdown.value}s)`
  return '获取验证码'
})

// 获取验证码
const captchaImgPath = ref('')
const captchaId = ref('')
const getCaptcha = () => {
  APIClient.get('/sys-api/captcha').then((res: any) => {
    captchaImgPath.value = res.data.imgPath
    captchaId.value = res.data.captchaId
  })
}

// 切换登录方式
const switchLoginType = (type: LoginType) => {
  currentLoginType.value = type
  // 清空表单
  formData.smsCode = ''
  formData.password = ''
}

// 发送验证码
const sendSmsCode = async () => {
  if (!canSendSms.value) return

  isSendingSms.value = true

  try {
    // 模拟发送验证码
    await new Promise(resolve => setTimeout(resolve, 1000))

    // 开始倒计时
    startCountdown()

    // 显示成功提示
    console.log('验证码已发送')
  } catch (error) {
    console.error('发送验证码失败:', error)
  } finally {
    isSendingSms.value = false
  }
}

// 开始倒计时
const startCountdown = () => {
  smsCountdown.value = 60
  countdownTimer = setInterval(() => {
    smsCountdown.value--
    if (smsCountdown.value === 0) {
      clearInterval(countdownTimer!)
      countdownTimer = null
    }
  }, 1000)
}

// 登录处理
const handleLogin = async () => {
  if (!canLogin.value) return

  isLoading.value = true

  try {
    // APIClient.post('/sys-api/user/login', {
    //   password: formData.password,
    //   username: formData.phone,
    //   captcha: formData.captcha,
    //   captchaId: captchaId.value,
    // })
    //   .then((res: any) => {
    //     localStorage.setItem('token', res.data.token)
    //     document.cookie = "token=" + res.data.token;
    //     router.push('/')
    //   }).catch(() => {
    //   getCaptcha() // 登录失败重新获取验证码
    // })
    // 模拟登录请求
    await new Promise(resolve => setTimeout(resolve, 1500))
    APIClient.post('/login', {
      password: formData.phone,
      phone_number: formData.password
    }).then(async res => {
      // 登录成功后跳转
      localStorage.setItem('token', res.token)
      document.cookie = "token=" + res.token;
      router.push('/')
    })
  } catch (error) {
    console.error('登录失败:', error)
  } finally {
    isLoading.value = false
  }
}

// 微信扫码登录 - 在切换到微信模式时自动调用
const initWechatLogin = () => {
  // 这里可以集成微信扫码登录SDK
  console.log('初始化微信扫码登录')
  // 可以在这里调用微信SDK生成二维码
}

// 格式化手机号
const formatPhone = (value: string) => {
  // return value.replace(/\D/g, '').slice(0, 11)
  return value;
}

// 格式化验证码
const formatSmsCode = (value: string) => {
  return value.replace(/\D/g, '').slice(0, 6)
}

// 组件销毁时清理定时器
import { onUnmounted, watch } from 'vue'
import PageTop from "components/page-top.vue";
import { useSysStore } from "stores/sysStore";
import { storeToRefs } from "pinia";
import APIClient from "src/utils/APIClient";

// 监听登录方式变化
watch(currentLoginType, (newType) => {
  if (newType === 'wechat') {
    initWechatLogin()
  }
})

onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
})

onMounted(()=>{
  // getCaptcha()
})
</script>

<template>
  <div class="login-top" v-show="sysStores.isWindows">
    <page-top></page-top>
  </div>
  <div class="login-container">
    <div class="login-container-le">
      <div class="serve-desc media-font">
        无论您在哪里，
        <br>工作日9:00到12:00,13:00到17:00
        <br>为您提供专业的远程视频面对面帮您咨询事项、准备材料、受理办件。
      </div>
      <div class="serve-step">
        <div class="step-title media-font">流程服务说明</div>
        <view class="step-icon-box">
          <img class="step-icon" src="../assets/images/index/f1.png">
          <img class="step-icon" src="../assets/images/index/f2.png">
          <img class="step-icon" src="../assets/images/index/f3.png">
          <img class="step-icon" src="../assets/images/index/f4.png">
          <img class="step-icon" src="../assets/images/index/f5.png">
          <img class="step-icon" src="../assets/images/index/f6.png">
          <img class="step-icon" src="../assets/images/index/f7.png">
        </view>
      </div>
      <div class="serve-alert media-font">
        您也可以点这里
        <a href="https://deyang.flopsai.cn" target="_blank"><img class="message-icon" src="../assets/images/index/message.png"></a>
        为您提供全年无休智能咨询服务。
      </div>
    </div>

    <div class="login-container-ri">
      <div class="sys-title media-font-max">政务远程视频服务系统</div>
      <!-- 登录卡片 -->
      <div class="login-card">
        <!-- 右侧登录区域 -->
        <div class="login-section">
          <div class="login-them">
            <div class="sys-name">Moremei</div>
            <div class="sys-desc">系统登录</div>
          </div>
          <div class="login-tabs" v-show="false">
            <div class="tab-buttons">
              <button :class="['tab-btn', { active: currentLoginType === 'sms' }]" @click="switchLoginType('sms')">
                验证码登录
              </button>
              <button :class="['tab-btn', { active: currentLoginType === 'password' }]"
                @click="switchLoginType('password')">
                密码登录
              </button>
              <button :class="['tab-btn', { active: currentLoginType === 'wechat' }]"
                @click="switchLoginType('wechat')">
                微信登录
              </button>
            </div>
          </div>

          <!-- 登录表单 -->
          <div v-if="currentLoginType !== 'wechat'" class="login-form">
            <!-- 手机号输入 -->
            <div class="input-group">
              <q-input v-model="formData.phone" outlined label="手机号" placeholder="请输入手机号" class="apple-input"
                :disable="isLoading" @update:model-value="formData.phone = formatPhone($event)">
                <template #prepend>
                  <q-icon name="phone" color="grey-6" />
                </template>
              </q-input>
            </div>

            <!-- 验证码登录 -->
            <div v-if="currentLoginType === 'sms'" class="input-group">
              <q-input v-model="formData.smsCode" outlined label="验证码" placeholder="请输入验证码" class="apple-input"
                :disable="isLoading" @update:model-value="formData.smsCode = formatSmsCode($event)">
                <template #prepend>
                  <q-icon name="message" color="grey-6" />
                </template>
                <template #append>
                  <q-btn :disable="!canSendSms" :loading="isSendingSms" flat dense color="primary" class="sms-btn"
                    @click="sendSmsCode">
                    {{ smsButtonText }}
                  </q-btn>
                </template>
              </q-input>
            </div>

            <!-- 密码登录 -->
            <div v-if="currentLoginType === 'password'" class="input-group">
              <q-input v-model="formData.password" outlined label="密码" placeholder="请输入密码"
                :type="showPassword ? 'text' : 'password'" class="apple-input" :disable="isLoading">
                <template #prepend>
                  <q-icon name="lock" color="grey-6" />
                </template>
                <template #append>
                  <q-icon :name="showPassword ? 'visibility' : 'visibility_off'" color="grey-6"
                    @click="showPassword = !showPassword" class="cursor-pointer" />
                </template>
              </q-input>
            </div>

<!--            <div class="input-group input-group-captcha">-->
<!--              <q-input v-model="formData.captcha" style="width: 200px" outlined label="验证码" placeholder="请输入验证码" class="apple-input"-->
<!--                       :disable="isLoading">-->
<!--                <template #prepend>-->
<!--                  <q-icon name="phone" color="grey-6" />-->
<!--                </template>-->
<!--              </q-input>-->
<!--              <img class="captcha-img" :src="captchaImgPath" alt="">-->
<!--            </div>-->


            <!-- 记住我 -->
            <div class="remember-section">
              <q-checkbox v-model="formData.remember" label="记住我" class="apple-checkbox" />
            </div>

            <!-- 登录按钮 -->
            <q-btn :disable="!canLogin" :loading="isLoading" @click="handleLogin" class="login-btn" unelevated rounded
              size="lg" color="primary">
              <span v-if="!isLoading">立即登录</span>
            </q-btn>

            <div class="tis">请注意：如果您从未使用过视频办件平台，在您第一次输入验证码登录的时候我们将同时为您注册账号
            </div>
          </div>

          <!-- 微信扫码区域 -->
          <div v-if="currentLoginType === 'wechat'" class="wechat-qr-section">

            <div class="qr-container">
              <div class="qr-placeholder">
                <q-icon name="qr_code" size="140px" color="grey-6" />
                <div class="qr-status">
                  <q-icon name="wechat" size="24px" color="green" />
                  <span>扫码登录</span>
                </div>
              </div>
            </div>

            <div class="qr-tips">
              <p>打开微信，扫一扫登录</p>
            </div>

            <q-btn flat color="grey-6" class="back-btn" @click="switchLoginType('sms')">
              <q-icon name="arrow_back" size="18px" />
              <span>返回其他登录方式</span>
            </q-btn>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped lang="scss">
.login-top {
  position: absolute;
  width: 100%;
  height: 60px;
  top: 0;
  left: 0;
  z-index: 9999;
}

// 主容器
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  // background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #A589EF url(src/assets/images/index/bg.jpg) no-repeat;
  background-size: cover;

  .login-container-le {
    flex: 1;
    margin-right: 100px;
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;

    @media (max-width: 1440px) {
      margin-right: 80px;
    }

    @media (max-width: 1024px) {
      margin-right: 60px;
    }

    @media (max-width: 768px) {
      margin-right: 40px;
    }

    .serve-desc {
      color: #ffffff;
      line-height: 28px;
      position: absolute;
      top: 80px;
      left: 50px;
    }

    .serve-step {
      margin: 50px 0 0 80px;
      width: 100%;

      .step-title {
        color: #ffffff;
        line-height: 28px;
        margin-left: 30px;
      }

      .step-icon-box {
        display: flex;
        justify-content: space-around;
        margin-top: 30px;

        .tep-icon,
        img {
          width: 90px;
          height: 136px;
        }

        @media (max-width: 1440px) {
          img {
            width: 65px;
            height: 98px;
          }
        }

        @media (max-width: 1024px) {
          img {
            width: 40px;
            height: 67px;
          }
        }

        @media (max-width: 768px) {
          img {
            width: 30px;
            height: 51px;
          }
        }
      }
    }

    .serve-alert {
      color: #ffffff;
      line-height: 28px;
      position: absolute;
      bottom: 80px;
      left: 50px;
      display: flex;
      align-items: center;

      .message-icon {
        width: 30px;
        height: 30px;
        margin: 0 3px;
        cursor: pointer;
      }
    }
  }
}

// 背景装饰
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  // 浮动几何图形
  .floating-element {
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    animation: float 8s ease-in-out infinite;

    &.element-1 {
      width: 280px;
      height: 280px;
      border-radius: 50%;
      top: 8%;
      left: 3%;
      animation-delay: 0s;
      background: rgba(102, 126, 234, 0.05);
    }

    &.element-2 {
      width: 180px;
      height: 180px;
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      top: 45%;
      right: 8%;
      animation-delay: 2.5s;
      background: rgba(118, 75, 162, 0.06);
    }

    &.element-3 {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      bottom: 12%;
      left: 12%;
      animation-delay: 5s;
      background: rgba(255, 255, 255, 0.04);
    }

    &.element-4 {
      width: 90px;
      height: 90px;
      border-radius: 20%;
      top: 25%;
      left: 75%;
      animation-delay: 1.5s;
      background: rgba(102, 126, 234, 0.04);
      transform: rotate(45deg);
    }

    &.element-5 {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      bottom: 35%;
      right: 25%;
      animation-delay: 4s;
      background: rgba(118, 75, 162, 0.03);
    }
  }

  // 浮动图标
  .floating-icon {
    position: absolute;
    animation: iconFloat 12s ease-in-out infinite;

    &.icon-1 {
      top: 20%;
      left: 15%;
      animation-delay: 0s;
    }

    &.icon-2 {
      top: 60%;
      right: 20%;
      animation-delay: 2s;
    }

    &.icon-3 {
      bottom: 25%;
      left: 70%;
      animation-delay: 4s;
    }

    &.icon-4 {
      top: 35%;
      right: 45%;
      animation-delay: 6s;
    }

    &.icon-5 {
      bottom: 40%;
      left: 25%;
      animation-delay: 8s;
    }
  }

  // 装饰线条
  .decorative-lines {
    .line {
      position: absolute;
      background: linear-gradient(45deg, rgba(255, 255, 255, 0.03), rgba(102, 126, 234, 0.05));

      &.line-1 {
        width: 2px;
        height: 300px;
        top: 10%;
        left: 30%;
        transform: rotate(15deg);
        animation: lineGlow 8s ease-in-out infinite;
      }

      &.line-2 {
        width: 1px;
        height: 200px;
        top: 40%;
        right: 35%;
        transform: rotate(-20deg);
        animation: lineGlow 10s ease-in-out infinite;
        animation-delay: 2s;
      }

      &.line-3 {
        width: 1.5px;
        height: 150px;
        bottom: 20%;
        left: 60%;
        transform: rotate(45deg);
        animation: lineGlow 6s ease-in-out infinite;
        animation-delay: 4s;
      }
    }
  }

  // 网格背景
  .grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
    animation: gridMove 20s linear infinite;
  }

  // 光晕效果
  .light-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    animation: orbGlow 15s ease-in-out infinite;

    &.orb-1 {
      width: 400px;
      height: 400px;
      top: -100px;
      left: -100px;
      background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
      animation-delay: 0s;
    }

    &.orb-2 {
      width: 300px;
      height: 300px;
      bottom: -80px;
      right: -80px;
      background: radial-gradient(circle, rgba(118, 75, 162, 0.08) 0%, transparent 70%);
      animation-delay: 5s;
    }
  }
}

// 动画关键帧
@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-30px) rotate(180deg);
  }
}

@keyframes iconFloat {

  0%,
  100% {
    transform: translateY(0px) scale(1);
    opacity: 0.6;
  }

  33% {
    transform: translateY(-15px) scale(1.1);
    opacity: 0.8;
  }

  66% {
    transform: translateY(-5px) scale(0.9);
    opacity: 0.4;
  }
}

@keyframes lineGlow {

  0%,
  100% {
    opacity: 0.2;
    box-shadow: 0 0 5px rgba(102, 126, 234, 0.1);
  }

  50% {
    opacity: 0.6;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
  }
}

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(50px, 50px);
  }
}

@keyframes orbGlow {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

// 登录卡片
.login-card {
  position: relative;
  z-index: 1;
  display: flex;
  width: 400px;
  min-height: 460px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

// 左侧Logo区域
.logo-section {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
  }

  .logo-container {
    text-align: center;
    position: relative;
    z-index: 1;

    .logo-icon {
      margin-bottom: 1.5rem;
      animation: pulse 3s ease-in-out infinite;
    }

    .app-title {
      font-size: 2.5rem;
      font-weight: 700;
      color: white;
      margin: 0 0 1rem 0;
      text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      letter-spacing: -0.02em;
    }

    .app-subtitle {
      font-size: 1.1rem;
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
      font-weight: 400;
    }
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

// 右侧登录区域
.login-container-ri {
  display: flex;
  flex-direction: column;
  margin-right: 100px;

  .sys-title {
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
    font-weight: 500;
  }

  .login-them {
    text-align: center;
    line-height: 25px;
    margin-bottom: 15px;

    .sys-name {
      font-size: 20px;
      font-weight: bold;
    }

    .sys-desc {
      font-size: 14px;
      color: #8b949e;
    }
  }
}

.login-section {
  // flex: 1;
  padding: 2rem 2.5rem;
  background: #fafbfc;
  display: flex;
  flex-direction: column;
}

// 登录方式切换
.login-tabs {
  margin-bottom: 2rem;

  .l1 {
    font-size: 1.7rem;
    color: rgba(0, 0, 0, 0.66);
  }

  .l2 {
    color: rgba(0, 0, 0, 0.66);
    padding-top: 10px;
  }

  .tab-buttons {
    display: flex;
    background: #f0f2f5;
    border-radius: 12px;
    padding: 4px;

    .tab-btn {
      flex: 1;
      padding: 12px 16px;
      border: none;
      background: transparent;
      border-radius: 8px;
      font-size: 0.9rem;
      font-weight: 500;
      color: #8b949e;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        color: #495057;
      }

      &.active {
        background: white;
        color: #495057;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

// 登录表单
.login-form {
  flex: 1;

  .input-group {
    margin-bottom: 1.5rem;
    .captcha-img{
      width: 120px;
      height: 50px;
    }
  }
  .input-group-captcha{
    display: flex;
  }

  :deep(.apple-input) {
    .q-field__control {
      border-radius: 12px;
      background: white;
      border-color: #e1e8ed;

      &:hover {
        border-color: #667eea;
      }
    }

    .q-field__native {
      color: #495057;
      font-weight: 500;
    }

    .q-field__label {
      color: #8b949e;
      font-weight: 500;
    }

    &.q-field--focused .q-field__control {
      border-color: #667eea;
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    }
  }

  .sms-btn {
    font-size: 0.85rem;
    font-weight: 500;
  }

  .remember-section {
    margin-bottom: 1.5rem;

    :deep(.apple-checkbox) {
      .q-checkbox__label {
        color: #8b949e;
        font-weight: 500;
      }
    }
  }

  .login-btn {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #689FF2 0%, #C088AF 100%) !important;
    margin-bottom: 1.5rem;

    &:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    }

    &:disabled {
      opacity: 0.6;
      background: #e1e8ed;
    }
  }

  .tis {
    color: #9e9e9e;
    line-height: 22px;
    font-size: 13px;
  }
}

// 微信扫码区域
.wechat-qr-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;

  .qr-container {
    margin-bottom: 1.5rem;

    .qr-placeholder {
      position: relative;
      text-align: center;
      padding: 2rem;
      border: 2px dashed #e1e8ed;
      border-radius: 16px;
      background: white;
      min-width: 200px;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:hover {
        border-color: #00c851;
        box-shadow: 0 6px 20px rgba(0, 200, 81, 0.1);
      }

      .qr-status {
        margin-top: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #8b949e;
        font-size: 0.9rem;
        font-weight: 500;

        .q-icon {
          animation: pulse 2s ease-in-out infinite;
        }
      }
    }
  }

  .qr-tips {
    text-align: center;
    margin-bottom: 2rem;

    p {
      color: #8b949e;
      font-size: 0.85rem;
      margin: 0;
    }
  }

  .back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;

    &:hover {
      background: #f8f9fa;
      color: #495057;
    }

    span {
      margin-left: 0.25rem;
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .login-card {
    width: 300px;
    height: 400px;
  }

  .logo-section {
    .logo-container {
      .app-title {
        font-size: 2rem;
      }
    }
  }

  .login-section {
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .login-card {
    flex-direction: column;
    width: 300px;
    height: auto;
    max-height: 90vh;
  }

  .logo-section {
    min-height: 200px;

    .logo-container {
      .app-title {
        font-size: 1.5rem;
      }
    }
  }

  .login-section {
    padding: 1.5rem;
  }
}

.media-font {
  font-size: 19px;

  @media (max-width: 1440px) {
    font-size: 17px;
  }

  @media (max-width: 1024px) {
    font-size: 15px;
  }

  @media (max-width: 768px) {
    font-size: 13px;
  }
}

.media-font-max {
  font-size: 30px;

  @media (max-width: 1440px) {
    font-size: 25px;
  }

  @media (max-width: 1024px) {
    font-size: 20px;
  }

  @media (max-width: 768px) {
    font-size: 16px;
  }
}
</style>
